<template>
    <div class="semicircle row">
        <slot></slot>
        <div class="col">
            <char3Vue
                src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/yibiaopan_Graphic_blue.png"
                :data="char3" color2="#36F097" color3="#9C8AD0" color="l(180) 0:#31C5FF 1:#066CFC" :height="180"
                text="测评率"></char3Vue>
        </div>
        <div class="semicircle_div">
            <el-row>
                <el-col :span="7">
                    <img width="32" src="https://cdn.hterobot.com/JOY/kexuezhongxin/icon_cepingrenshu.png" alt="">
                </el-col>
                <el-col :span="17" class="semicircle_text">
                    <div class="semicircle_text1"> 测评次数
                        &nbsp;
                        &nbsp;
                        <el-icon color2="" color="#55FF5E">
                            <CaretTop />
                        </el-icon>
                    </div>
                    <div class="semicircle_text2">{{ num2 }}</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="7">
                    <img width="32" src="https://cdn.hterobot.com/JOY/kexuezhongxin/icon_cepingrenshu.png" alt="">
                </el-col>
                <el-col :span="17" class="semicircle_text">
                    <div class="semicircle_text1">人均测评数
                        <el-icon color="#55FF5E">
                            <CaretTop />
                        </el-icon>
                    </div>
                    <div class="semicircle_text2">{{ Math.floor(num2 / num1) }}</div>
                </el-col>
            </el-row>
        </div>
        <div class="col">
            <char3Vue
                src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/yibiaopan_Graphic_orange.png"
                color2="#F03636" color3="#E45E33" color="l(180) 0:#FD4031 1:#FC890A" :data="char4" :height="180"
                text="测评正确率"></char3Vue>
        </div>
    </div>
</template>

<script setup lang="ts">
import { CaretTop } from '@element-plus/icons-vue';
import char3Vue from './datachar/char3.vue';

defineProps<{ char3: number, num1: number, num2: number, char4: number }>()


</script>

<style scoped>
.semicircle {
    --height: 166px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    height: var(--height);
    margin: 0 auto;
    --bs-gutter-x: 12px;

}

.semicircle_div {
    width: 120px;
    padding-top: 35px !important;
    padding: 0;
}

.semicircle_text {
    color: #FFFFFF;
    height: 38px;
    margin-bottom: 12px;

}

.semicircle_text1 {
    font-size: 12px;
    font-family: FZZongYi-M05S;
}

.semicircle_text2 {
    font-size: 16px;
    font-family: Bebas;

}
</style>